<template>
	<view class="shop-intro-wrapper bg-w flex">
		<image 
			class="border-radius-16" 
			:src="shopIntro.pic" mode=""
			style="width: 132rpx;height: 132rpx;"
		></image>
		<view class="flex flex-align-center m-l-20 flex-space-between flex-1">
			<view class="m-t-10">
				<text class="font32 color-181D18 f-b">{{ shopIntro.name }}</text>	
				<view class="m-t-30 font28 color-8E8E8E">
					{{ shopIntro.followNum }}人关注
				</view>	
			</view>	
			<view class="button-follow flex flex-center color-w font28 f-b" @click="onFollow">
				<image style="width: 32rpx;height: 30rpx; margin-right: 16rpx;" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/ic_follow_w.png" mode=""></image>
				{{ shopIntro.isFollow ? '取消关注' : '关注' }}
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, getCurrentInstance } from 'vue';
	const { proxy } = getCurrentInstance() as any;
	
	const props = defineProps({
		shopIntro: {
			type: Object,
			default: {}
		}
	})

const onFollow = () => {
		
		const loginInfo = uni.getStorageSync('loginInfo');
		
		if(loginInfo && loginInfo.userId){
			const url = proxy.$API.merchantFollow;
			proxy.$UNIHTTP.postData(url, {
				merchantId: props.shopIntro.id,
				userId: loginInfo.userId
			}).then(res => {
				if(res.code == 0){
					isFollow.value = !isFollow.value;
					uni.showToast({
						icon: 'success',
						title: isFollow.value ? '已关注' : '已取消'
					});
				}else{
					uni.showToast({
						icon: 'none',
						title: isFollow.value ? '取消失败' : '关注失败'
					});
				}
			}).finally(() => {
				uni.hideLoading();
			})
		}else{
			uni.showModal({
				title: '提示',
				content: '当前暂未登录，是否去登录',
				cancelText: '否',
				confirmText: '是',
				success(e) {
					if(e.confirm){
						uni.navigateTo({url: '/pages/accompany-tmp/my/login/login'});
					}
				}
			})
		}
		
		
	}

</script>

<style lang="scss" scoped>
	.shop-intro-wrapper {
		padding: 18rpx;
		border-radius: 20rpx;
	}
	.button-follow {
		width: 252rpx;
		height: 64rpx;
		background: #3FA897;
		border-radius: 32rpx;
	}
</style>